import React, { useState,useEffect } from 'react';
import { Sidebar, Toast } from 'react-vant';
import { useDispatch,useSelector} from 'react-redux';
import {SETLIST,ALLSTATE} from '../../../tyeps/store.d'
import '../../../api/indexMock'
import requset from '../../../utils/requset'
export default function Class() {
  const [active, setActive] = useState(2);
  const dispatch = useDispatch()

  useEffect(()=>{
    requset.get('/api/list').then(res=>{
      dispatch({
        type:SETLIST,
        payload: res.data.list
      })
    })
  },[])
  const listData = useSelector((state: ALLSTATE) => {
    return state.list
})
  return (
    <div>
      
      <Sidebar
        value={active}
        onChange={(v) => {
          setActive(v);
          Toast.info(`标签名 ${v + 1}`);
        }}
      >
        {
          listData&&listData.map((item,index)=>{
            return <Sidebar.Item title={item.user}/>
          })
        }
        
        {/* <Sidebar.Item title="标签名2" />
        <Sidebar.Item title="标签名3" /> */}
      </Sidebar>
    </div>
  )
}
